<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
		<meta charset="utf-8">
   		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>机箱</title>
		<!-- Bootstrap -->
    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/sticky-footer-navbar.css" />
    	<link rel="stylesheet" href="css/common.css" />
    	<link rel="stylesheet" href="css/cpu.css" />
    	<style>
    		body {
    			background: #eee;
    		}
    	</style>

  </head>
  
	<body>
		<!--导航-->
		<nav class="navbar navbar-default  navbar-fixed-top">
			<div class="container">
				<nav class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="index.html" class="navbar-brand">M-SS网上商城</a>
				</nav>
				<div class="collapse navbar-collapse" id="myNavbar" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">首页</a></li>
						<li><a href="#">功能1</a></li>
						<li><a href="#">功能2</a></li>
						<li><a href="#">功能3</a></li>
						<li><a href="#">功能4</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-responsive-collapse navbar-right">
						<li>
							<a href="#"><span class="glyphicon glyphicon-user"></span> 我的账户</a>
						</li>
						<li>
							<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right hidden-sm">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="搜索商品" />
						</div>
						 <button type="submit" class="btn btn-success">搜索</button>
					</form>
		     	</div>
			</div>
		</nav>
		<!--导航-->
		
		<div class="container mrtop67" id="cpu">
			<div class="panel panel-default" id="mr2">
				<div class="panel-heading" id="#menu2">
					机箱
				</div>
			</div>
			<!--<div class="col-md-4">    备份代码
				<div class="panel panel-info">
					<div class="panel-heading">商品-XXXXX</div>
					<div class="panel-body">
						<a href="#">
							<img class="img-responsive" src="img/5R02DN32QOAM_1000x500.jpg" alt="" />
						</a>
					</div>
					<div class="panel-footer text-center">
							<h3 style="margin-top: 1px;">￥19</h3>
							<p>XXXXXXXXXXXXXXXXXXXXXX</p>
							<a class="btn btn-info" href="#">查看详情</a>
							<a class="btn btn-success" href="#">购买</a>
					</div>
				</div>
			</div>-->
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						</a>
						<a class="btn btn-info" href="#">查看详情</a>
						<a class="btn btn-danger" href="#">购买</a>
					</div>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						</a>
						<a class="btn btn-info" href="#">查看详情</a>
						<a class="btn btn-danger" href="#">购买</a>
					</div>
			</div>
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						</a>
						<a class="btn btn-info" href="#">查看详情</a>
						<a class="btn btn-danger" href="#">购买</a>
					</div>
			</div>
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						</a>
						<a class="btn btn-info" href="#">查看详情</a>
						<a class="btn btn-danger" href="#">购买</a>
					</div>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
						</a>
						<a class="btn btn-info" href="#">查看详情</a>
						<a class="btn btn-danger" href="#">购买</a>
					</div>
			</div>
		</div>
		
		<footer class="container-fluid panel-footer text-center footer">
			<p>网上商城 Copyright</p>
		</footer>
		<!--内容-->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	</body>
</html>
